<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆管理</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../bootstrap-table/bootstrap-table.css">
    <script src="../../bootstrap-table/bootstrap-table.js"></script>
    <script src="../../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../toastr/toastr.min.css">
    <script src="../../toastr/toastr.min.js"></script>

</head>
<body class="container-fluid">
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;">
</div>
<!--按钮容器-->
<div class="row" id="tableToolBar">
    <button class="btn btn-sm btn-warning" id="addBtn" style="margin-left: 15px"><i class="fa fa-plus" aria-hidden="true"></i>添加新款</button>
    <button class="btn btn-sm btn-danger" id="deleteMoreBtn">批量删除</button>
</div>
<!--bootstrap表-->
<div class="row">
    <div class="col-md-12" id="myTable"></div>
</div>
<!--    添加或编辑模态框-->
<div class="modal fade" id="myDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myDialogHeaderLable">
                </h4>
            </div>
            <div class="modal-body" id="myDialogBody">
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="col-md-3 form-group">
                            <div class="col-sm-12">
                                <img src="../../images/bc1.jpg" height="180" width="240" id="surfaceImg1"/>
                                <input type="file" name="files" class="form-control files" id="File1"
                                       style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer">
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="col-sm-12">
                                <img src="../../images/bc2.jpg" height="180" width="240" id="surfaceImg2"/>
                                <input type="file" name="files" class="form-control files" id="File2"
                                       style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer">
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="col-sm-12">
                                <img src="../../images/bc3.jpg" height="180" width="240" id="surfaceImg3"/>
                                <input type="file" name="files" class="form-control files" id="File3"
                                       style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer">
                            </div>
                        </div>
                        <div class="col-md-3 form-group">
                            <div class="col-sm-12">
                                <img src="../../images/bc4.jpg" height="180" width="240" id="surfaceImg4"/>
                                <input type="file" name="files" class="form-control files" id="File4"
                                       style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer">
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">ID</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_id">
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">车名</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_name"
                                       placeholder="请输入车名">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">排量</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_displacement"
                                       placeholder="请输入排量">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">变速箱</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_gearbox"
                                       placeholder="请输入变速箱">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">车身结构</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_structure"
                                       placeholder="请输入车身结构">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">制动方式</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_braking"
                                       placeholder="请输入制动方式">
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">最大功率</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_maxpower"
                                       placeholder="请输入最大功率">
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">最大扭矩</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_maxtorque"
                                       placeholder="请输入最大扭矩">
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">最大马力</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="c_maxhorsepower"
                                       placeholder="请输入最大马力">
                            </div>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">品牌</label>
                            <div class="col-md-9">
                                <select class="form-control" id="c_brand">

                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">驱动方式</label>
                            <div class="col-md-9">
                                <select class="form-control" id="c_drive">

                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">进气形式</label>
                            <div class="col-md-9">
                                <select class="form-control" id="c_inflow">

                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="col-md-3 control-label">级别</label>
                            <div class="col-md-9">
                                <select class="form-control" id="c_type">

                                </select>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="updateBtn">

                </button>
            </div>
        </div><!-- /.modal-content --></div>
</div>

<!--    删除模态框-->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    删除数据</h4>
            </div>
            <div class="modal-body" id="deleteDialogMsg">
                确定要删除该数据
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="deleteBtn">
                    删除
                </button>
            </div>
        </div><!-- /.modal-content --></div>
</div>

<script>

var c_ids=[];

$(document).ready(function () {


        //当模态框关闭时，清空模态框数据
        $('#myDialog').on('hidden.bs.modal', function () {
            clearModelData();
        });

        $("#addBtn").click(function () {
            $("#c_id").val("");
            $("#myDialog").modal("show");
            showModal();
        });

        $("#updateBtn").click(function ()   {
            var c_id=$("#c_id").val();
            if(c_id==""){
                $.ajax({
                    url: "../../car/insertCar",
                    type: "post",
                    dataType: "json",
                    data: {
                        c_name: $("#c_name").val(),
                        c_displacement: $("#c_displacement").val(),
                        c_gearbox: $("#c_gearbox").val(),
                        c_structure: $("#c_structure").val(),
                        c_braking:$("#c_braking").val(),
                        c_maxpower:$("#c_maxpower").val(),
                        c_maxtorque:$("#c_maxtorque").val(),
                        c_maxhorsepower:$("#c_maxhorsepower").val(),
                        c_brand_id:$("#c_brand").val(),
                        c_drive_id:$("#c_drive").val(),
                        c_inflow_id:$("#c_inflow").val(),
                        c_type_id:$("#c_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }
                        initTable();
                    }
                });
            }else{
                $.ajax({
                    url: "../../car/updateCar",
                    type: "post",
                    dataType: "json",
                    data: {
                        c_id:$("#c_id").val(),
                        c_name: $("#c_name").val(),
                        c_displacement: $("#c_displacement").val(),
                        c_gearbox: $("#c_gearbox").val(),
                        c_structure: $("#c_structure").val(),
                        c_braking:$("#c_braking").val(),
                        c_maxpower:$("#c_maxpower").val(),
                        c_maxtorque:$("#c_maxtorque").val(),
                        c_maxhorsepower:$("#c_maxhorsepower").val(),
                        c_brand_id:$("#c_brand").val(),
                        c_drive_id:$("#c_drive").val(),
                        c_inflow_id:$("#c_inflow").val(),
                        c_type_id:$("#c_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            initTable();
                            toastr.success(result.status);
                        }
                        initTable();
                    }
                });
                    //添加图片
                //    批量上传图片，第一位封面图片
                //     $(".files")
                var formData = new FormData();
                // var files = $('.files').prop('files');
                $(".files").each(function () {
                    console.log(this.files[0]);
                    formData.append('files', this.files[0]);
                })
                console.log(formData);
                // formData.append('files', $('#surfaceFile')[0].files[0]);
                // formData.append('files', $('#img1')[0].files[0]);
                formData.append('c_id',c_id);
                // formData.append('info',$("#info").val());

                // console.log(files);
                // data.append('avatar', files[0]);

                $.ajax({
                    url: '../../car/upload',
                    type: 'POST',
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType: false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData: false,
                    success: function (res) {
                        console.log(res);
                        if(res.errorCode==0){
                            alert("图片已更新")
                        }else{
                            alert("数据已更新");
                        }
                    }
                });

            }

        });

        $("#deleteBtn").click(function () {
            $.ajax({
                url:"../../car/delete",
                type:"get",
                dataType:"json",
                traditional: true,
                data:{
                    c_ids:c_ids
                },
                success:function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose=result.errorCode;
                    if(errorCose==0){
                        //模态框隐藏
                        $("#myDeleteModal").modal("hide");
                        initTable();
                        toastr.success(result.status);
                    }
                    initTable();
                }
            });
        });


        $("#deleteMoreBtn").click(function () {
            //    获取所有被选中的记录的id
            var rows = $("#myTable").bootstrapTable("getSelections");
            c_ids = [];
            for (var i = 0; i < rows.length; i++) {
                c_ids[i] = rows[i].c_id;
            }
            showDeteleModel("确定要停售这" + rows.length + "款车吗");
        });

        initTable();
        function initTable() {
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../../car/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                // silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "c_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [
                    {
                        checkbox: true,
                    },
                    {
                        field: 'c_name',//JSon数据中的相应的key
                        title: '车名',//表头信息
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_displacement',
                        title: '排量(ml)',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_gearbox',
                        title: '变速箱',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_structure',
                        title: '车身结构',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_braking',
                        title: '制动方式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxpower',
                        title: '最大功率',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxtorque',
                        title: '最大扭矩',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_maxhorsepower',
                        title: '最大马力',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'b_name',
                        title: '品牌',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'd_name',
                        title: '驱动方式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'i_name',
                        title: '进气形式',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },{
                        field: 't_name',
                        title: '级别',
                        sortable: true,
                        width: 100,
                        align: 'center',
                        valign: 'middle',
                    },

                    {
                        title:"操作",
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                        // 如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        events:operateEvents,
                        formatter:function (value,row,index) {
                            return "<button class='btn btn-primary btn-sm updateCar' ><i class='fa fa-pencil-square-o' aria-hidden='true'></i>编辑</button>\n" +
                                "<button class='btn btn-danger btn-sm deleteCar'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                        }
                    }

                ],
            });
        }

    });

window.operateEvents={
        'click .updateCar': function (e, value, row, index) {
            $("#c_id").val(row.c_id);

            //    查询该图书数据，并加载到模态框中
            $.ajax({
                url: "../../car/selectById",
                type: "post",
                dataType: "json",
                //序列化,能够传递数组给服务器
                traditional: true,
                data: {
                    id: row.c_id
                },
                success: function (result) {
                    var errorCose = result.errorCode;
                    if (errorCose == 0) {

                        showModal();
                        $("#c_name").val(result.object.c_name);
                        $("#c_displacement").val(result.object.c_displacement);
                        $("#c_gearbox").val(result.object.c_gearbox);
                        $("#c_structure").val(result.object.c_structure);
                        $("#c_braking").val(result.object.c_braking);
                        $("#c_maxpower").val(result.object.c_maxpower);
                        $("#c_maxtorque").val(result.object.c_maxtorque);
                        $("#c_maxhorsepower").val(result.object.c_maxhorsepower);
                        $("#c_drive").val(result.object.c_drive_id);
                        $("#c_brand").val(result.object.c_brand_id);
                        $("#c_type").val(result.object.c_type_id);
                        $("#c_inflow").val(result.object.c_inflow_id);

                    }
                    initTable();
                }

            });
        },
        'click .deleteCar': function (e, value, row, index) {
            c_ids=[];
            c_ids[0]=row.c_id;
            showDeteleModel("确定要删除"+row.c_name);
        },
    };

$("#File1").change(function () {
        imgPreview1(this);
    });
$("#File2").change(function () {
        imgPreview2(this);
    });
$("#File3").change(function () {
        imgPreview3(this);
    });
$("#File4").change(function () {
        imgPreview4(this);
    });

function showModal() {
    $.ajax({
        url: "../../carother/selectAllBrand",
        type: "get",
        dataType: "json",
        async: false,//设置为同步方法
        success: function (result) {
            if(result.errorCode==0){
                var list = result.objectList;
                var mySelect = $("#c_brand");
                mySelect.html("");
                $(list).each(function (index) {
                    html = $("<option></option>").text(list[index].b_name).val(list[index].b_id);
                    mySelect.append(html);
                })
            }

        }
    });
    $.ajax({
        url: "../../carother/selectAllInflow",
        type: "get",
        dataType: "json",
        async: false,//设置为同步方法
        success: function (result) {
            if(result.errorCode==0){
                var list = result.objectList;
                var mySelect = $("#c_inflow");
                mySelect.html("");
                $(list).each(function (index) {
                    html = $("<option></option>").text(list[index].i_name).val(list[index].i_id);
                    mySelect.append(html);
                })
            }

        }
    });
    $.ajax({
        url: "../../carother/selectAllDrive",
        type: "get",
        dataType: "json",
        async: false,//设置为同步方法
        success: function (result) {
            if(result.errorCode==0){
                var list = result.objectList;
                var mySelect = $("#c_drive");
                mySelect.html("");
                $(list).each(function (index) {
                    html = $("<option></option>").text(list[index].d_name).val(list[index].d_id);
                    mySelect.append(html);
                })
            }

        }
    });
    $.ajax({
        url: "../../carother/selectAllType",
        type: "get",
        dataType: "json",
        async: false,//设置为同步方法
        success: function (result) {
            if(result.errorCode==0){
                var list = result.objectList;
                var mySelect = $("#c_type");
                mySelect.html("");
                $(list).each(function (index) {
                    html = $("<option></option>").text(list[index].t_name).val(list[index].t_id);
                    mySelect.append(html);
                })
            }

        }
    });

    var c_id = $("#c_id").val();
    if (c_id=="") {
        $("#myDialogHeaderLable").text("添加新款");
        $("#updateBtn").text("添加");
        $("#myDialog").modal("show");
    } else {
        $("#myDialogHeaderLable").text("编辑数据");
        $("#updateBtn").text("编辑");
        $("#myDialog").modal("show");
    }
};
function showDeteleModel(msg) {
    $("#deleteDialogMsg").html(msg);
    $("#myDeleteModal").modal("show");
};
function imgPreview1(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        console.log(file);
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        reader.readAsDataURL(file);
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $("#surfaceImg1");

            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
            // alert(e.target.result);
        };
    };
function imgPreview2(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        console.log(file);
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        reader.readAsDataURL(file);
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $("#surfaceImg2");

            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
            // alert(e.target.result);
        };
    };
function imgPreview3(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        console.log(file);
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        reader.readAsDataURL(file);
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $("#surfaceImg3");

            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
            // alert(e.target.result);
        };
    };
function imgPreview4(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        console.log(file);
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        reader.readAsDataURL(file);
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $("#surfaceImg4");

            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
            // alert(e.target.result);
        };
    };

</script>
</body>
</html>